<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>购物车</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        .container {
            background: cornsilk;
        }
        .red-font{
            color: #c63205;
            font-size: 16px;
            margin: 0 5px;
        }
        hr{
            margin: 0;
        }
       /***************************/
        .table>tbody>tr>th{
            border-top:0;
            text-align: center;
        }
        .table>tbody>tr>td{
            position: relative;
            text-align: center;
            border-bottom: 1px solid #ddd;
        }
        .table>tbody>tr>td:first-child{
            border-left: 1px solid #ddd;
        }
        .table>tbody>tr>td:last-child{
            border-right: 1px solid #ddd;
        }
        table tr td img{
            width: 100%;
        }
        .checkbox-row{
            display: inline-block;
            position: relative;
        }
        .ls-checkbox {
            display: inline-block;
            width: 25px;
            height: 25px;
            opacity: 0;
            z-index: 100000;
        }
        .ls-checkbox + label {
            background-color: #99a1a7;
            border: 1px solid #cacece;
            padding: 10px;
            border-radius: 3px;
            display: inline-block;
            position: absolute;
            top: 5px;
            left: 1px;
        }
        .ls-checkbox:checked + label {
            background-color: #fff;
            border: 1px solid #adb8c0;
            color: #ffb723;
        }
        .ls-checkbox:checked + label:after {
            content: '\2714';
            font-size: 18px;
            position: absolute;
            top: -1px;
            left: 3px;
            color: #ffb723;
        }
        .jiesuan{
            height: 50px;
            background: #eee;
            margin: 50px 0;
        }
        .jiesuan .jiesuan-left{
            display: inline-block;
            width: 40%;
            padding-left: 25px;
            height: 50px;
            line-height: 50px;
        }
        .jiesuan .jiesuan-right{
            display: inline-block;
            text-align: right;
            width: 55%;
        }
        .jiesuan .jiesuan-right>span{
            margin:0 20px 0 10px;
        }
    </style>
</head>
<body>
<!--顶部导航-->
<!--第一块，search模块-->
<div id="top-part"></div>
<div id="search-part"></div>

<hr class="divider">
<!--主体内容-->
<div class="container">
    <table class="table" style="margin-top: 10px">
        <tbody>
            <tr>
                <th colspan="4">商品信息</th>
                <th>金额（元）</th>
                <th>操作</th>
            </tr>
            <tr>
                <td class="col-sm-1" >
                    <br>
                    <div class="checkbox-row">
                        <input type="checkbox" class="ls-checkbox" id="chk" name="chkgoods">
                        <label for="chk"></label>
                    </div>
                </td>
                <td class="col-sm-1">
                    <img src="images/4.jpg" alt="">
                </td>
                <td><br>商品名称商品名称</td>
                <td><br>颜色：<br>尺码：</td>
                <td><br>价格：</td>
                <td><br><span class="glyphicon glyphicon-trash"></span></td>
            </tr>
            <tr>
                <th></th>
            </tr>
            <tr>
                <td class="col-sm-1" >
                    <br>
                    <div class="checkbox-row">
                        <input type="checkbox" class="ls-checkbox" id="chk2" name="chkgoods">
                        <label for="chk2"></label>
                    </div>
                </td>
                <td class="col-sm-1">
                    <img src="images/5.jpg" alt="">
                </td>
                <td><br>商品名称商品名称</td>
                <td><br>颜色：<br>尺码：</td>
                <td><br>价格：</td>
                <td><br><span class="glyphicon glyphicon-trash"></span></td>
            </tr>
            <tr>
                <th></th>
            </tr>
        </tbody>
    </table>
</div>
<div class="container" style="background: #fff; padding: 0">
    <div class="jiesuan">
        <div class="jiesuan-left" >
            <input type="checkbox" id="checkall" class="checkall" onclick="allnone()">
            <span style="margin: 0 15px 0 5px">全选/全不选</span>
            <button type="button" class="btn btn-default">删除</button>
        </div>
        <div class="jiesuan-right" >
            <span>已选商品<span class="red-font">0</span>件</span>
            <span>总金额(不含运费)：¥<span class="red-font" >0.00</span>元</span>
            <button type="button" class="btn btn-danger">结算</button>
        </div>
    </div>
</div>


</body>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
    $("#top-part").load("top-part.html");
    $("#search-part").load("search-part.html");
</script>
<script>
    var loves=document.getElementsByName("chkgoods");
    var ckb1=document.getElementById("checkall");
    var j=0;
    function alls(){
        for(var i=0;i<loves.length;i++){
            var love1=loves[i];
            love1.checked=true;
        }
        ckb1.checked=true;
    }
    function none(){
        for(var i=0;i<loves.length;i++){
            var love1=loves[i];
            love1.checked=false;
        }
        ckb1.checked=false;
    }
    function allnone(){
        if(ckb1.checked==true){
            alls();
        }else{
            none();
        }
    }
    for(var i=0;i<loves.length;i++){
        var love1=loves[i];
        love1.onclick=function(){
            if(this.checked==true){
                j++;
                if(j==loves.length)
                    ckb1.checked=true;
            }else if(this.checked==false){
                j--;
                if(j!=loves.length)
                    ckb1.checked=false;
            }
        }
    }
</script>

</html>